
<template>
  <div v-for="(item, index) in dataList" :key="item.id">
    <div class="eventList_box">
      <div class="title_box">
        <div :style="{ backgroundColor: item.bgc }" class="level">{{ item.levelText }}</div>
        <div class="title">{{ item.type + '-' + item.describe }}</div>
      </div>

      <div class="time_box">
        <van-icon class="posIcon" name="location-o" size="12px" />
        <div class="posTime_box">
          <div class="pos">{{ item.pos }}</div>
          <div class="time">{{ item.time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { computed, ref, onBeforeMount } from 'vue'
import db from '../database/db'
import eventBus from '../utils/eventBus'

const coalState = ref('pending')
const coalEventType = ref('')
const searchValue = ref('')


onBeforeMount(() => {
  init();
})

const obj = {
  1: "一级",
  2: "二级",
  3: "三级",
}

const bgc = {
  1: "red",
  2: "orange",
  3: "skyblue",
}
//状态
eventBus.on('coalState', (val) => {
  coalState.value = val
})
eventBus.on('coalEventType', (val) => {
  coalEventType.value = val
})
eventBus.on('searchValue', (val) => {
  searchValue.value = val
})

// 初始化
const init = () => {
  db.forEach(item => {
    item.text = obj[item.level];
    item.bgc = bgc[item.level];
  });
}
// 定义状态的条件
const type = ref("全部类型");
const state = ref("pending");
const pos = ref('')
// 要展示的数据：
let dataList = computed(() => {
  const temps = db.filter(item => {
    return (item.state == state.value) && (type.value === "全部类型" ? true : item.type == type.value) && (pos.value === "" ? true : item.pos.includes(pos.value));

  });
  console.log("temps", temps);
  return temps;
})
</script>

<style scoped>
.eventList_box {
  width: 310px;
  height: 48px;
  font-size: 15px;
}

.title_box {
  display: flex;
  justify-content: start;
  align-items: center;
}

.level {
  width: 36px;
  font-size: 12px;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.time_box {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 10px;

  :deep(.posIcon) {
    margin-right: 5px;
  }
}

.posTime_box {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>